import React from 'react';
import { Button } from 'antd';
import Cookies from 'js-cookie';
import { history } from 'umi';

import './index.css';

class Login extends React.Component {
  state = {
    loadings: [],
  };

  // 访问登录页判断是否已经登录过
  componentWillMount() {
    const isLogin = !!Cookies.get('token');
    if (isLogin) {
      history.push('/');
    }
  }

  login = (index) => {
    this.setState(({ loadings }) => {
      const newLoadings = [...loadings];
      newLoadings[index] = true;
      return {
        loadings: newLoadings,
      };
    });
    setTimeout(() => {
      this.setState(({ loadings }) => {
        const newLoadings = [...loadings];
        newLoadings[index] = false;

        return {
          loadings: newLoadings,
        };
      });
      if (!localStorage.themeHeader) {
        window.localStorage.setItem(
          'themeHeader',
          JSON.stringify({ othersettings: { colorWeak: false, menuShow: true, logoShow: true } }),
        );
      }
      //登录成功跳转
      Cookies.set('token', '123', { expires: 1, path: '' });
      history.push('/');
    }, 1000);
  };

  render() {
    const { loadings } = this.state;
    return (
      <div className="page">
        <div className="container">
          <div className="left">
            <div className="login">登录</div>
            <div className="eula">欢迎使用！</div>
          </div>
          <div className="right">
            <div className="form">
              <label>邮箱</label>
              <input type="email" id="email" />
              <label>密码</label>
              <input type="password" id="password" />
              <div>
                <Button
                  block
                  type="dashed"
                  loading={loadings[0]}
                  onClick={() => this.login(0)}
                >
                  登录
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Login;
